<template>
  <div>
    <div class="rec-li" v-for="item in list" :key="item.id">
      <div class="rec-li-head">
        <el-checkbox
          v-model="item.checked"
          @change="handleCheckedBoxChange"
        ></el-checkbox>
        {{ item.publish_time | parseTime("{y}-{m}-{d} {h}:{i}:{s}") }}
        <span style="color: red">动态id:{{ item.trend_id }}</span>
        <span v-if="type==='stickTop'">置顶时间:{{ item.start_time }}至{{item.end_time}}</span>
        <div class="button-group">
          <span class="operator" v-if="item.operator"
            >最后操作人：{{ item.operator }}</span
          >
          <el-button type="primary" size="small" @click="handleList(item)"
            >详情</el-button
          >
           <el-button
            type="primary"
            size="small"
            @click="handleUpdateItem([item], '3')"
            v-if="item.admin_state == 0"
            >忽略</el-button
          >
          <el-button
            type="primary"
            size="small"
            @click="handleUpdateItem([item], '1')"
            v-if="item.admin_state == 0"
            >通过</el-button
          >
          <el-button
            :type="item.if_recommend?'danger':'primary'"
            size="small"
            @click="handleRecommendItem([item], item.if_recommend)"
             v-if="item.admin_state == 1 || item.admin_state == 0"
            >{{item.if_recommend?'取消推荐':'推荐'}}</el-button
          >
          <el-button
            type="danger"
            size="small"
            @click="handleUpdateItem([item], '2')"
            v-if="item.admin_state != 2 && type !== 'stickTop'"
            >删除</el-button
          >
          <el-button
            type="danger"
            size="small"
            v-if="type === 'stickTop'"
            @click="onDeleleStick(item)"
          >
            删除置顶
          </el-button>
          <template>
            <el-button
              type="danger"
              size="small"
              @click="banPlayer(item.user_id)"
              v-if="item.user_id != 0 && item.forbidden_state == 2"
              >封号</el-button
            >
            <el-button size="small" disabled v-if="item.forbidden_state == 1"
              >已封号</el-button
            >
          </template>
        </div>
      </div>
      <div class="rec-li-body">
        <div class="rec-li-body-left">
          <div class="user">
            <div class="username">
              <span class="name uid-click" @click="$UserInfoPopUp.install(item.user_id)">内部ID:{{ item.user_id }}</span>
              <span class="name">昵称:{{ item.nickname }}</span>
              <span class="name">机器人:{{ item.robot ? "是" : "否" }}</span>
              <span class="name">性别:{{ item.sex | sex }}</span>
              <span v-if="item.user_id != 0" color="red"
                >被删帖数量：{{ item.deleted_sum }}</span
              >
            </div>
          </div>

          <div>
            <el-tag type="primary" size="small" v-if="item.topic_title">{{
              item.topic_title
            }}</el-tag>
          </div>
          <div class="count">
            <span>评论:{{ item.comment_num }}</span>
            <span>点赞:{{ item.like_num }}</span>
            <span>得分:{{ item.admin_score }}</span>
            <span>{{ item.label_name }}</span>
          </div>
        </div>
        <div class="rec-li-body-right">
          <div class="article-content">​​{{ item.content }}</div>
          <template v-if="!!item.video_url">
            <div
              class="video-cover"
              @click="openVideoDialog(imgHost + item.video_url)"
            >
              <img
                class="video-img"
                alt
                :src="imgHost + item.video_picture"
                style="display: block; height: 150px; width: 100%"
              />
              <div class="video-play"></div>
            </div>
          </template>
          <template v-else>
          <template v-if="item.voice_url">
            <audio
              :src="item.voice_url | filterUrl"
              controls="controls"
            ></audio>
          </template>
          <template v-if="item.pics && item.pics.length > 0">
            <div>
              <el-image
              style="display: inline-block;width: 50px;height: 60px;margin: 5px 10px;"
                class="avatar"
                v-for="(img, index1) in item.pics"
                :src="imgHost + img.replace('.gif', '')"
                :key="index1"
                :preview-src-list="item.images"
                
              ></el-image>
    
            </div>
          </template>
           </template>
        </div>
      </div>
    </div>
    <el-alert
      v-if="!loading && !list.length"
      title="暂无数据"
      center
    ></el-alert>
    <ModalDynamic
      :modal-visible="operationFormVisible"
      :form-data="operationInfo"
      :current_id="currentTrendId"
      @handleVisibleChange="handleDetailModalVisible"
      @handleSuccess="$parent.getList"
    />
    <!--图片预览-->
    <img-viwer :visible.sync="imgVisible" :image="dialogImgSrc" />
    <!--视频预览-->
    <el-dialog :visible.sync="videoDialogVisible" custom-class="video-dialog">
      <video
        :src="videoUrl"
        controls="controls"
        autoplay="autoplay"
        width="500"
        height="400"
      ></video>
    </el-dialog>
  </div>
</template>
<script>
import baseConfig from "@/config/baseConfig";
import ImgViwer from "@/components/ImageViewer";
import ModalDynamic from "@/views/materialManage/components/ModalDynamic";
export default {
  components: { ModalDynamic, ImgViwer },
  props: ["list", "loading", "type"], //type是否为置顶动态
  data() {
    return {
      checkedAll: false,
      currentTrendId: "",
      operationFormVisible: false,
      operationInfo: {},
      imgVisible: false,
      videoDialogVisible: false,
      dialogImgSrc: "",
      videoUrl: "",
    };
  },
  filters: {
    filterUrl(str) {
      return baseConfig.imgHost + str.split("_DURATION")[0];
    },
  },
  methods: {
    handleList(row) {
      this.currentTrendId = row.trend_id;
      this.operationFormVisible = true;
      this.$nextTick(() => {
        this.operationInfo = Object.assign(row);
      });
    },
    handleCheckedBoxChange(value) {
      this.checkedAll = this.list.every((item, index, array) => {
        return item.checked === true;
      });
      this.$emit("onCheckedChange", this.checkedAll);
    },
    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.operationInfo.label.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
    },
    handleDetailModalVisible(val) {
      this.operationFormVisible = val;
    },
    imgClick(src) {
      this.dialogImgSrc = src.replace(".gif", "");
      this.imgVisible = true;
    },
    //更新数据状态
    handleUpdateItem(rows, admin_state) {
      let ids = rows.map((item) => {
        return item.trend_id;
      });
      let urls = rows.reduce((accumulator, item) => {
        if (item.pics) {
          return accumulator.concat(item.pics);
        }
        if (item.video_picture) {
          return accumulator.concat(item.video_url).concat(item.video_picture);
        }
        if (item.voice_url) {
          return accumulator.concat(item.voice_url);
        }
        return accumulator;
      }, []);
      let title = "";
      if (admin_state == "2") {
        title = "确定删除该动态吗？";
      } else if (admin_state == "3") {
        title = "确定忽略该动态吗？";
      } else if (admin_state == "1") {
        title = "确定审核通过该动态吗？";
      }
      this.$alert(title, "提示", {
        confirmButtonText: "确定",
        callback: (action) => {
          if (action == "confirm") {
            this.$put("trend/admin", {
              trend_id: ids,
              resource_url: urls,
              admin_state: admin_state, //0:待处理 1:已处理 2:已删除 3:已忽略',
            }).then((resp) => {
              if (resp.status === 200) {
                this.$parent.getList();
                this.$message({
                  message: "操作成功",
                  type: "success",
                });
                this.operationFormVisible = false;
              } else {
                this.$message({
                  message: resp.msg,
                  type: "error",
                });
              }
            });
          }
        },
      });
    },
    handleRecommendItem(rows, recommend){
      let ids = rows.map((item) => {
        return item.trend_id;
      });
      let urls = rows.reduce((accumulator, item) => {
        if (item.pics) {
          return accumulator.concat(item.pics);
        }
        if (item.video_picture) {
          return accumulator.concat(item.video_url).concat(item.video_picture);
        }
        if (item.voice_url) {
          return accumulator.concat(item.voice_url);
        }
        return accumulator;
      }, []);
        this.$put("trend/admin", {
              trend_id: ids,
              resource_url: urls,
              admin_state: 1, //0:待处理 1:已处理 2:已删除 3:已恢复',
              if_recommend: !recommend
            }).then((resp) => {
              if (resp.status === 200) {
                this.$parent.getList();
                this.$message({
                  message: "操作成功",
                  type: "success",
                });
                this.operationFormVisible = false;
              } else {
                this.$message({
                  message: resp.msg,
                  type: "error",
                });
              }
            });
    },
    openVideoDialog(url) {
      this.videoDialogVisible = true;
      this.videoUrl = url.replace(".gif", "");
    },
    onDeleleStick(item) {
      this.$confirm("确定删除该置顶吗？").then(() => {
        this.$del("trend/top/" + item.id)
          .then((resp) => {
            if (resp) {
              this.$message.success("删除成功");
              this.$parent.getList();
            }
          })
          .catch((err) => {
            this.$message.error(err.data.error.description);
          });
      });
    },
  },
};
</script>
<style lang="scss">
.rec-li:hover {
  box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.125);
}

.rec-li {
  border: 1px solid #cccaca;
  border-radius: 5px;
  margin: 10px 0;

  .rec-li-head {
    padding: 10px;
    border-bottom: 1px solid #cccaca;

    .button-group {
      float: right;
    }

    .el-checkbox__inner {
      margin-top: -2px;
    }
  }

  .rec-li-body {
    padding: 10px;
    display: flex;
    font-size: 14px;

    .rec-li-body-left {
      flex: 1;
      padding-right: 10px;

      .user {
        display: flex;

        .avatar {
          width: 40px;
          height: 40px;
          margin: 5px;
        }

        .username {
          padding: 5px;
          flex: 1;

          p {
            margin: 10px 0 0 0;
          }

          .name {
            margin-right: 20px;
          }
        }
      }

      .tags {
        margin: 10px 0;
      }

      .count {
        span {
          display: inline-block;
          margin: 10px;
        }
      }
    }

    .rec-li-body-right {
      flex: 1;
    }
  }
}

</style>